<!-- 插样详情 -->
<template>
  <el-dialog title="EDX插样" width="900" :model-value="modelValue" @close="commEvent.onClose">
    <el-row v-for="item in 10" :key="item" :gutter="20" class="mb20">
      <el-col :span="8">
        <div class="sample-list">
          <div class="list-label">孔号：</div>
          <div class="list-value">
            <el-select class="w-full" />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="sample-list">
          <div class="list-label">样品名称：</div>
          <div class="list-value">
            <el-input placeholder="请输入" class="w-full" />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="sample-list">
          <div class="list-label">检测编号：</div>
          <div class="list-value">
            <el-select class="w-full" />
          </div>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script setup lang="ts">
defineProps({
  modelValue: { type: Boolean, default: false }
})
const emit = defineEmits(["update:modelValue", "refresh"])
// 事件
const commEvent = {
  // 关闭弹窗
  onClose: () => {
    emit("update:modelValue", false)
  }
}
</script>

<style lang="scss" scoped>
.w-full {
  width: 100%;
}
.sample-list {
  display: flex;
  align-items: center;
  width: 100%;
  .list-label {
    flex-shrink: 0;
    width: 70px;
    font-size: 14px;
    text-align: right;
  }
  .list-value {
    flex: 1;
  }
}
</style>
